<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- 启用360浏览器的极速模式(webkit) – -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 若开启长按无法复制链接-->
    <!--meta name="browsermode" content="application"-->
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!--网站开启对web app程序的支持-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!--在web app应用下状态条（屏幕顶部条）的颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!--移动web页面是否自动探测电话号码-->
    <!--<meta http-equiv="x-rim-auto-match" content="none">-->
    <!--手机号码显示为拨号链接-->
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="max-age=300" />
    <meta http-equiv="Expires" content="300" />
    <title>8号金融街</title>
    <link rel="stylesheet" href="popularize.css">
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
    <script src="../js/jquery.min.js"></script>
    <script>
        (function() {
            var rem, dpr, time, doc = window.document,
                docEl = doc.documentElement,
                viewport = doc.querySelector('meta[name="viewport"]'),
                zoomScale,
                zoomScaleNum;
            if (viewport) {
                //console.warn("将根据已有的meta标签来设置缩放比例");
                zoomScale = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
                if(zoomScale){
                    zoomScaleNum = parseFloat(zoomScale[2]);
                    dpr = parseInt(1 / zoomScaleNum);
                }
            }
            if (!dpr && !zoomScaleNum) {
                // console.warn(“根据未设置meta标签来缩放比例”)
                var os = (window.navigator.appVersion.match(/android/gi), window.navigator.appVersion.match(/iphone/gi)),
                    dpr = window.devicePixelRatio;
                dpr = os ? dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1 : 1;
                zoomScaleNum = 1 / dpr;
            }
            window.addEventListener("resize",
                function() {
                    clearTimeout(time);
                    time = setTimeout(changeRem, 300);
                },false);

            //改变基准rem
            function changeRem(){
                var docWidth = docEl.getBoundingClientRect().width;
                // 540 1080P
                // if(docWidth / dpr > 540){
                //     docWidth = 540 * dpr;
                // }
                rem = docWidth/360 * 16;
                docEl.style.fontSize = rem + "px";
            }
            changeRem();
        })();
    </script>
    
</head>
<body>
    <div class="container"> 
        <div class="swiper-wrapper">
        <div class="swiper-slide a1">
            <video id="video1" class="one" playsinline="true"  webkit-playsinline="true" loop="loop" x-webkit-airplay="true" preload="auto" poster="one-background.png" style="width:100%;  margin-top: -5px;">
                <source type="video/mp4" src="one.mp4">
            </video>

            <!--<div class="icon-href">-->

                <!--<div class="icon-href-left">-->
                    <!--<img src="icon.png">-->
                <!--</div>-->
                <!--<div class="icon-href-right">-->
                    <!--<p>8号金融街</p>-->
                    <!--<a href="http://www.8hjie.com/">http://www.8hjie.com/</a>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="content">-->
                <!--<img src="top.png">-->
                <!--<p>-->
                    <!--&nbsp;&nbsp;8号金融街是由腾讯大粤网，金果网络科技联合出品，致力于做最温暖的网络理财第三方-->
                    <!--平台。这里有“最有颜”“最有料”的网络理财课程；有资深网络理财高手，深度测评，避雷必看；-->
                    <!--有严选优质理财产品，投资更有红包领。更可以成为理财投顾。理财知识共享，赢关注，赚奖金！-->
                <!--</p>-->
                <!--<img src="bottom.png" class="right">-->
                <!--<div>-->
                    <!--<img src="slip.png" class="slip">-->
                <!--</div>-->
            <!--</div>-->

            <div class="icon">
                <img src="background-one.png">
                <p>      8号金融街是由腾讯大粤网，金果网络科技联合出品，致力于做最温暖的网络理财第三方服务平台。这里有“最有颜”“最有料”的网络理财课程；有资深网络理财高手，深度测评，避雷必看；有严选优质理财产品，投资更有红包领。更可以成为理财投顾，理财知识共享，赢关注，赚奖金！</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="vid-wrappper">
                 <video id="video2" playsinline="true"  webkit-playsinline="true" loop="loop" x-webkit-airplay="true" preload="auto" poster="two-background.png" style="width:100%; object-fit:fill; margin-top: -1px;">
                <source type="video/mp4" src="two.mp4">
            </video>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="detail">
                <h2>8号金融产品/服务</h2>
                <ul>
                    <li>
                        <h4>平台实地走访</h4>
                        <p>8号金融街联合腾讯大粤网，对平台进行实地走访视频拍摄。通过视频传播的形式大大增强平台征信力。</p>
                    </li>
                    
                    <li>
                        <h4>理财视频学堂</h4>
                        <p>看“最有颜”“最有料”的网络理财课程！</p>
                    </li>
                    <li>
                        <h4>理财产品评测</h4>
                        <p>资深网络理财高手，深度评测，避雷必看。</p>
                    </li>
                    <li>
                        <h4>网络理财导航</h4>
                        <p>严选优质理财产品，投资更有红包领！</p>
                    </li>
                    <li>
                        <h4>成为理财投顾</h4>
                        <p>理财知识共享，赢关注，赚奖金！</p>
                    </li>
                    
                </ul>
            </div>
            <div class="footer">
                <div class="our-detail">
                    <ul>
                        <li>
                            <h3>联系我们</h3>
                        </li>
                        <li>
                            <img src="telephone.png" class="telephone">
                            <p>400-999-2337</p>
                        </li>
                        <li>
                            <img src="QQ.png" class="qq">
                            <p>1000828</p>
                        </li>
                        <li>
                            <img src="place.png" class="place">
                            <p class="adress">地址：深圳市福田区沙头街道<br>&nbsp;NEO大厦C座12F</p>
                        </li>
                    </ul>
                </div>
                <div class="erweima">
                    <img src="erweima.jpg">
                </div>
                <div class="btn">
                    <button onclick="location.href='http://www.8hjie.com/'">访问8号金融街官网</button>
                </div>
            </div>
        </div>
        </div>
    </div>
     <script src="../assets/swiper/js/swiper.jquery.min.js"></script> 
    <script>
    $(function(){
    
    $('#video2').width(document.documentElement.clientWidth)
    $('#video2').height(document.documentElement.clientHeight)
    document.getElementById('video1').play(); 
    })
    $('#video1').click(function(){
        document.getElementById('video1').play();
        document.getElementById('video2').pause();
    })
    $('#video2').click(function(){
        document.getElementById('video2').play();
        document.getElementById('video1').pause();
    })
    var swiper = new Swiper('.container', {
      direction: 'vertical',
      pagination: {
        clickable: true,

      }, 
      
       height : window.innerHeight,
      onSlideChangeStart: function(swiper){
       var H = document.documentElement.clientHeight;
         $(".swiper-slide").css('height', H + 'px');
        $(".swiper-wrapper").css('height', H + 'px');
    }
    });



      </script>

    </body>

</html>